<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/12/04
  File: index.html
  Description: "
  
   基于 bootstrap v3.3.7 重构 联塑官网首页
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<!-- 中文 -->
<!-- <html lang="zh-Hans"> -->
<!-- 简体中文 -->
<!-- <html lang="zh-cmn-Hans"> -->
<!-- 繁体中文 -->
<!-- <html lang="zh-cmn-Hant"> -->
<!-- English -->
<!-- <html lang="en"> -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" href="https://www.lesso.com/favicon.ico">
  <title>index</title>
  <!-- art-template 兼容IE8 辅助js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--
    [if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]
  -->

  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/theme.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/font-size.css">
</head>

<body>

  <!-- #region 带搜索的 导航 -->
  <nav class="navbar">
    <div class="container-fluid">
      <!-- #region 汉堡菜单 关闭状态菜单属性是 class="navbar-toggle collapsed" aria-expanded="false" -->
      <div class="navbar-header  col-sm-1 col-md-2">
        <!-- #region 汉堡按钮 -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hambuger" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="black icon-bar"></span>
          <span class="black icon-bar"></span>
          <span class="black icon-bar"></span>
        </button>
        <!-- #endregion  -->
        <a class="navbar-brand col-xs-3 col-lg-8 col-xs-5" href="#">
          <img class="logo img" class="" src="https://www.lesso.com/templates/touch/images/logo.png" alt="联塑">
          <!-- <img class="visible-md visible-lg" src="https://www.lesso.com/upfile/2020/03/20200323110946_695.png" alt="联塑"> -->
        </a>
        <span class="gufen  visible-xs">股份代号 : 小屏幕X.XX</span>
      </div>
      <!-- #endregion  -->

      <!-- #region 导航链接盒子以及其他内容 :请把你的 a 标签导航 ul>li>a 写在这个里面 -->
      <div class="top-nav navbar-collapse collapse  " aria-expanded="true" id="hambuger" style="height: 1px;">
        <ul class="nav navbar-nav navbar-right   col-sm-10 col-lg-9">
          <li class="gufen visible-sm visible-md visible-lg">股份代号 : 中大屏X.XX</li>

          <li class="hidden-xs"><a href="#" class="back">xxx</a></li>
          <li><a href="#" class="active">首页</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于联塑
              <span class="pull-down-icon pull-right visible-xs">+</span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">集团简介</a></li>
              <li><a href="#">品牌历史</a></li>
              <li><a href="#">品牌管理</a></li>
              <li><a href="#">集团实力</a></li>
              <li><a href="#">管理团队</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">联塑业务<span class="pull-down-icon pull-right visible-xs">+</span></a>
            <ul class="dropdown-menu">
              <li><a href="#">管道产业</a></li>
              <li><a href="#">建材家居产业</a></li>
              <li><a href="#">环保产业</a></li>
              <li><a href="#">渠道与服务</a></li>
              <li><a href="#">农业</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务中心<span class="pull-down-icon pull-right visible-xs">+</span></a>
            <ul class="dropdown-menu">
              <li><a href="#">服务网络</a></li>
              <li><a href="#">轻松生活</a></li>
              <li><a href="#">追溯查询</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">资讯中心<span class="pull-down-icon pull-right visible-xs">+</span></a>
            <ul class="dropdown-menu">
              <li><a href="#">新闻中心</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">投资者关系<span class="pull-down-icon pull-right visible-xs">+</span></a>
            <ul class="dropdown-menu">
              <li><a href="#">公告及通函</a></li>
              <li><a href="#">定期报告</a></li>
              <li><a href="#">社会责任</a></li>
              <li><a href="#">企业管治</a></li>
              <li><a href="#">股票信息</a></li>
              <li><a href="#">业绩推介</a></li>
              <li><a href="#">投资者咨询</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">加入联塑<span class="pull-down-icon pull-right visible-xs">+</span></a>
            <ul class="dropdown-menu">
              <li><a href="#">招纳贤士</a></li>
              <li><a href="#">招商加盟</a></li>
            </ul>
          </li>
          <li>
            <a>
              <span class="glyphicon glyphicon-search">

                <input class="search-input" type="text">
              </span> | EN
            </a>
          </li>
        </ul>
      </div>
      <!-- #endregion 导航链接盒子以及其他内容 :请把你的 a 标签导航 ul>li>a 写在这个里面 -->
    </div>
  </nav>
  <!-- #endregion  -->
  <!-- #region 轮播图 -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators 轮播指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1" class=""></li>
      <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <!-- #region 轮播图 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="first-slide visible-xs" src="https://www.lesso.com/upfile/2018/07/20180720091722_861.jpg" alt="First slide">
        <img class="img first-slide  visible-sm visible-md visible-lg" src="https://www.lesso.com/upfile/2018/07/20180725102214_889.jpg" alt="First slide">
      </div>
      <div class="item">
        <img class="second-slide visible-xs" src="https://www.lesso.com/upfile/2020/05/20200511110650_229.jpg" alt="Second slide">
        <img class="img second-slide visible-sm visible-md visible-lg" src="https://www.lesso.com/upfile/2020/05/20200511110637_178.jpg" alt="Second slide">
      </div>
      <div class="item">
        <img class="third-slide visible-xs" src="https://www.lesso.com/upfile/2020/05/20200511110509_273.jpg" alt="Third slide">
        <img class="img third-slide visible-sm visible-md visible-lg" src="https://www.lesso.com/upfile/2020/05/20200511110500_936.jpg" alt="Third slide">
      </div>
    </div>
    <!-- #endregion 轮播图 -->
    <!-- #region 轮播控制按钮 -->
    <!-- <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a> -->
    <!-- <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a> -->
    <!-- #endregion 轮播控制按钮 -->
  </div>
  <!-- #endregion  -->

  <!-- #region 轮播图下面的按钮导航组 class="link-group-container"
      首先一个 .container-fluid 盒子占满宽度 100%， 然后增加内边距
      接着里面还有一个 .link-group.row （table布局清除浮动）这个盒子设置阴影
      
      三个 a.item 标签 用 .col-xs-4 均分三分，小屏适配这样大屏也适用
      每个 item 分成：
        - 左边图标4份，
        - 中间随便谁来点外边距隔开
        - 右边图标7份 ，
      右边的文字分成上下
          h2 ：应该是seo优化使用的
          p：小屏时候 hidden-xs
  -->
  <div class="container-fluid link-group-container">
    <div class="link-group row">
      <a class="item col-xs-4">
        <i class="fa fa-newspaper-o col-sm-4"></i>
        <div class="text col-sm-7">
          <h2>新闻中心</h2>
          <p class="hidden-xs">广东联塑科技实业有限公司产教融合，校企合作三年规划</p>
        </div>
      </a>
      <a class="item col-xs-4">
        <i class="fa fa-newspaper-o col-sm-4 "></i>
        <div class="text col-sm-7">
          <h2>投资者关系</h2>
          <p class="hidden-xs">广东联塑科技实业有限公司产教融合，校企合作三年规划</p>
        </div>
      </a>
      <a class="item col-xs-4">
        <i class="fa fa-newspaper-o col-sm-4"></i>
        <div class="text col-sm-7">
          <h2>社会责任</h2>
          <p class="hidden-xs">广东联塑科技实业有限公司产教融合，校企合作三年规划</p>
        </div>
      </a>
    </div>
  </div>
  <!-- #endregion 轮播图下面的按钮导航组 -->

  <!-- #region    主体部分 标题 -->
  <div class="title-box hidden-xs">
    <div class="bg">
      <h2>我们的业务</h2>
    </div>
  </div>
  <!-- #endregion 主体部分 标题 -->

  <!-- #region    主体部分 中间的图文混排 用art-template 获取元素然后正则简单替换注释为空在塞回来 -->
  <article id="article-tpl">
    <!-- {{each $data}}
    <div class="row link">

      <div class="col-xs-6 big-img hidden-xs">

        <div class="icon-box-height">
          <img class="img" src="{{$value['big-img']}}" alt="{{$value.text}}" title="{{$value.text}}">
        </div>
      </div>

      <div class="col-xs-6 small-img">
        <div class="icon-box-height icon-bg">

          <div class="text">

            <div class="left col-sm-6 hidden-xs">
              <h2 class="title">{{$value.text}}</h2>
              <div class="content">{{$value.content}}</div>
            </div>

            <div class="right  hidden-sm">
              <div class="icon">
                <img  class="img"  src="{{$value.icon}}" alt="{{$value.text}}" title="{{$value.text}}">
                <p class="visible-xs">{{$value.text}}</p>
              </div>
            </div>

          </div>


        </div>
      </div>


      <div class="col-xs-6 visible-xs"><img class="img" src="{{$value['small-img']}}"></div>

    </div>
    {{/each}} -->
  </article>
  <!-- #endregion 主体部分 中间的图文混排 -->

  <!-- #region    主体部分 标题 -->
  <div class="title-box hidden-xs">
    <div>
      <h2 class="bg">我们的服务</h2>
    </div>
    <p>“以质量为生命，以科技为龙头，以顾客满意为宗旨”是联塑的经营方针，从售前的商务洽谈，售中的方案设计，到售后的安装指导及质量保修，服务贯穿全程。</p>
  </div>
  <!-- #endregion 主体部分 标题 -->

  <div id="service-tpl" class="service-box row font-sm font-md font-lg">

    <!-- 
      {{each $data}}
      <a class="item col-xs-4">
      <div class="service-height">
        <div class="service-content-big hidden-xs">
          <img class="img position" src="{{$value['big-img']}}" alt="">
          <div class="content col-sm-7">
            <div class="title">{{$value.text}}</div>
            <div class="p small">{{$value.content}}</div>
            <img src="{{$value.icon}}" alt="">
          </div>
        </div>
        <div class="service-content-small visible-xs">
          <div class="position">
            <img src="{{$value['small-img']}}" alt="">
            <p>服务网络</p>
          </div>
        </div>
      </div>
    </a> 
    {{/each }}
  -->

  </div>


  <!-- #region footer 
    footer 分成大屏和小屏
      大屏
        - top
          - left 三分之一
            - 公司信息
            - 其他平台的图标组
          - right 三分之二
            - 导航
        - bottom 版权信息
      小屏
        - 只有版权信息
  -->

  <footer class="container-fluid">
    <div class="top row hidden-xs ">
      <div class="left col-xs-5">
        <div class="logo"><img src="https://www.lesso.com/templates/specialty/images/footer-logo.png" alt=""></div>
        <div class="msg">
          <div>（于开曼群岛注册成立的有限责任公司）</div>
          <div>地址：中国广东省佛山市顺德区龙江镇联塑工业村</div>
          <div>电话：400-168-2128 (24小时)</div>
          <div>联塑官网移动版</div>
          <div>网站地图</div>
        </div>
      </div>
      <div class="right col-xs-7">
        <ul id="nav-tpl" class="nav navbar-nav pull-right hidden-sm">
          <!-- {{each $data}}
          <li>
            <a class="first" href="#">{{$value.link}}</a>
            {{if $value.children}}
            <ul>
              {{each $value.children}}
              <li><a class="second small" href="#">{{$value.link}}</a></li>
              {{/each}}
            </ul>
            {{/if}}
          </li>
          {{/each }} -->
        </ul>
      </div>
    </div>

    <div class="copyright bottom col-xs-12 text-center small">
      <p>广东联塑科技实业有限公司 Copyright © 2019 CHINA LESSO.<a target="_blank" href="#">版权所有.粤ICP备13023480号</a>
      </p>
    </div>
  </footer>
  <!-- #endregion footer -->

  <div class="container" style="padding: 40px;">
    <p>辅助标尺</p>
    <div class="row visible-on">
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <span class="hidden-xs">特别小型</span>
        <span class="visible-xs">✔ 在特别小型设备上可见visible-xs</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <span class="hidden-sm">小型</span>
        <span class="visible-sm">✔ 在小型设备上可见visible-sm</span>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <span class="hidden-md">中型</span>
        <span class="visible-md">✔ 在中型设备上可见 visible-md</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <span class="hidden-lg">大型</span>
        <span class="visible-lg">✔ 在大型设备上可见visible-lg</span>
      </div>
    </div>
  </div>
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- [参考](https://aui.github.io/art-template/zh-cn/docs/installation.html#在浏览器中实时编译) -->
  <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>
  <script src="./js/index.js" type="text/javascript"></script>

</body>

</html>